<template>
	<view >
		<view class="search-view">
			<input type="text" value="" placeholder="搜索" class="search" />
		</view>
		<view class="banner mtop">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<template v-for="v in banner_list">
					<swiper-item>
						<view class="swiper-item">
							<image :src="v.img" mode="scaleToFill" style="width: 750rpx;height: 300rpx;"></image>
						</view>
					</swiper-item>
				</template>
				
			</swiper>
		</view>
		
		<view class="good-list mtop">
			<template v-for="v in good_list">
				
				<view class="item">
					
					<view class="image-view">
						<image class="image" :src="v.img"></image>
					</view>
					
					<view class="info-view">
						<view class="title">
							{{v.title}}
						</view>
						<view class="desc">
							{{v.desc}}
						</view>
					</view>
					
					<view class="btn-view">
						<template v-if="v.status == 1">
							<view class=" btn " @tap="to_info(v)">
								入群
							</view>
						</template>
						<template v-if="v.status == 2">
							<view class=" btn btn-fill ">
								已满
							</view>
						</template>
					</view>
					
				</view>
				
			</template>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				good_list:[],
				banner_list:[],
				token:""
			}
		},
		onLoad(e) {
			this.token = uni.getStorageSync('token');
			if(e.token != '' && e.token != undefined)
			{
				uni.setStorageSync('token',e.token);
			}
			this.CheckUser();
			// this.getGoodList();
			// this.getBannerList();
		},
		methods: {
			getGoodList()
			{
				
				var _this = this;
				
				this.$request("good/getGoodList",{},'POST').then(res=>{
					this.good_list = res
				})
				
			},
			getBannerList()
			{
				var _this = this;
				
				this.$request("banner/getBannerList",{},'POST').then(res=>{
					this.banner_list = res
				})
				
			},
			to_info(v)
			{
				uni.navigateTo({
					url: 'good-info?good_id='+v.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss">
	.search-view{
		padding: 0.3rem 1rem;
		
		.search{
			background: #eee;
			padding: 0.5rem;
			border-radius: 1rem;
		}
	}
	
	
	.mtop{
		margin-top: 1rem;
	}
	
	.good-list{
		
		.item{
			display: flex;
			justify-content: space-between;
			padding: 1rem;
			align-items: center;
			
			
			.info-view{
				width: 60%;
				padding: 0 1rem;
				
				.title{
					font-size: 30rpx;
					font-weight: bold;
				}
				
				.desc{
					word-break:break-all;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
			}
			
			.image-view{
				
				.image{
					width: 80rpx;
					height: 80rpx;
				}
			}
			
			.btn-view{
				
				font-size: 20rpx;
				
				
				
				.btn{
					border: #007AFF solid 4rpx;
					border-radius: 1rem;
					padding: 10rpx 20rpx;
					color: #007AFF;
				}
				
				.btn-fill{
					border: #fc0006 solid 4rpx;
					border-radius: 1rem;
					color: #fc0006;
				}
				
			}
			
		}
		
	}
	
</style>
